<template>
    <div>
        <swiper :effect="'coverflow'" :grabCursor="true" :centeredSlides="true" :slidesPerView="'auto'" :coverflowEffect="{
            rotate: 50,
            stretch: 0.3,
            depth: 150,
            modifier: 1,
            slideShadows: false,
        }" :modules="modules" class="mySwiper" :autoplay="{ delay: 3000, disableOnInteraction: false }" :loop="true">
            <swiper-slide><img src="http://fdfs.xmcdn.com/storages/bee9-audiofreehighqps/ED/B6/GKwRIRwIn-CWAAGq4gJCKieT.jpg" /></swiper-slide>
            <swiper-slide><img src="http://fdfs.xmcdn.com/storages/597b-audiofreehighqps/48/D0/GMCoOR4IVMsPAAGxLgImIPaE.jpg" /></swiper-slide>
            <swiper-slide><img src="http://fdfs.xmcdn.com/storages/5a07-audiofreehighqps/07/63/GKwRIJEIVM7KAAGIJQImImTm.jpg" /></swiper-slide>
            <swiper-slide><img src="http://fdfs.xmcdn.com/storages/08c2-audiofreehighqps/3F/77/GMCoOR4IS4R4AAFgaAIjOMfw.jpg" /></swiper-slide>
            <swiper-slide><img src="http://fdfs.xmcdn.com/storages/08c2-audiofreehighqps/3F/77/GMCoOR4IS4R4AAFgaAIjOMfw.jpg" /></swiper-slide>
            <swiper-slide><img src="http://fdfs.xmcdn.com/storages/c380-audiofreehighqps/09/66/GKwRIUEIcGNVAAH7LAIvlG7e.jpg" /></swiper-slide>
        </swiper>
    </div>
</template>

<script lang="ts" setup>
import { Swiper, SwiperSlide } from 'swiper/vue';
import { EffectCoverflow, Pagination, Autoplay } from 'swiper/modules';
import 'swiper/less';
import 'swiper/less/effect-coverflow';
import 'swiper/less/pagination';
import "swiper/css/autoplay";
const modules = [EffectCoverflow, Pagination, Autoplay];
// 若还需要变化成其他样式的轮播图，需要将数据写成动态的。按照传进来的配置项来修改swiper显示的效果。
// ...
defineProps({
    list: {
        type: Array,
        required: true,
        defualt: []
    }
})
</script>


<script lang="ts">
export default {
    name: "WSwiper",
};
</script>

<style scoped lang="less">
.swiper {
    width: 100%;
    padding-top: 5px;
    padding-bottom: 10px;
}

.swiper-slide {
    background-position: center;
    background-size: cover;
    width: 80%;
    height: 126px;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 20px;
}
</style>